<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>车辆管理</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
</head>

<body>
<input class="hidden" type="text" th:value="${#httpServletRequest.getAttribute('licence')}" id="reqLicence">
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>车辆管理</h4></div>

        <div class="card-body">
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_enable" type="button" class="btn btn-success m-r-5">
              <span class="mdi mdi-check" aria-hidden="true"></span>启用
            </button>
            <button id="btn_disable" type="button" class="btn btn-warning m-r-5">
              <span class="mdi mdi-block-helper" aria-hidden="true"></span>维护
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
          </div>
          <table id="table"></table>

        </div>
      </div>
    </div>

  </div>

</div>

<!--新增和修改车辆信息的模态框-->
<div class="modal fade" id="carInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModal">新增车辆</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="carInfoForm">
          <div class="form-group">
            <label for="typeId" class="col-sm-4 control-label">货车类型：</label>
            <div class="col-sm-8">
              <select class=" form-control" id="typeId" name="typeId">
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="licence" class="col-sm-4 control-label">车牌号：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="licence" name="licence">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-primary" id="submit_btn">提交</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!--行内编辑插件-->
<link href="/static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript"
        src="/static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript"
        src="/static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script src="/static/js/mycommons.js"></script>
<script type="text/javascript">
  let $table = $("#table")

  $(function () {
    $('.search-bar .dropdown-menu a').click(function () {
      var field = $(this).data('field') || '';
      $('#search-field').val(field);
      $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    });

    //发送ajax请求，查出货车类型信息，显示在下拉列表中
    getCarTypes("#carInfoModal select")
  });

  $table.bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/car',
    method: 'get',
    dataType: 'json',        // 数据类型
    uniqueId: 'id',
    idField: 'id',             // 每行的唯一标识字段
    toolbar: '#toolbar',       // 工具按钮容器
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮
    cache: false, //不使用缓存，默认true

    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    paginationLoop: false,                // 禁用分页循环
    paginationSuccessivelySize: 5,        // 连续的最大连续页数
    paginationPagesBySide: 1,            // 当前页面每侧（右、左）的页数
    sortOrder: "desc",                    // 排序方式
    queryParams: function (params) {
      let search
      let licence = $("#reqLicence").val()
      if (licence !== undefined && licence !== '') {
        search = licence
      } else {
        search = params.search
      }
      let param = {
        limit: params.limit,         // 每页数据量
        page: (params.offset / params.limit) + 1, //查询页码
        search: search,        // 搜索内容
      };
      return param;
    },                                   // 传递参数
    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 5,                        // 每页的记录行数
    pageList: [5, 6, 7, 8, 9, 10],         // 可供选择的每页的行数
    search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    searchHighlight: true,          // 搜索高亮
    searchOnEnterKey: true,         //按 Enter 键搜索

    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

    columns: [{
      checkbox: true    // 是否显示复选框
    }, {
      field: 'id',
      title: 'ID',
      sortable: true    // 是否排序
    }, {
      field: 'licence',
      title: '车牌号码'
    }, {
      field: 'typeId',
      visible: false
    }, {
      field: 'carType.name',
      title: '货车类型',
    }, {
      field: 'createTime',
      title: '创建时间',
      formatter: formatTimeStr
    }, {
      field: 'lastEditTime',
      title: '最近编辑时间',
      formatter: formatTimeStr
    }, {
      field: 'operatorId',
      visible: false
    }, {
      field: 'operator.name',
      title: '操作员'
    }, {
      field: 'status',
      title: '状态',
      editable: {
        type: 'select',
        title: "状态",
        source: [
          {value: 0, text: '空闲'},
          {value: 1, text: '工作中'},
          {value: 2, text: '维护中'}
        ],
        noeditFormatter: function (value, row, index) {
          let result;
          if (value == 0 || value == '空闲') {
            result = {filed: "status", value: '空闲', class: "label label-success"};
          } else if (value == 1 || value == '工作中') {
            result = {filed: "status", value: '工作中', class: "label label-danger"};
          } else if (value == 2 || value == '维护中') {
            result = {filed: "status", value: '维护中', class: "label label-warning"};
          }

          return result; // 这里对bootstrap-table-editable.min.js做了一些修改，让其能接收class
        }
      }
    }, {
      field: 'operate',
      title: '操作',
      formatter: btnGroup,  // 自定义方法
      events: {
        'click .edit-btn': function (event, value, row, index) {
          editUser(row.id);
        },
        'click .del-btn': function (event, value, row, index) {
          tb_deleteOne(row.id, "/car")
        },
        'click .show-btn': function (event, value, row, index) {
          showUser(row);
        }
      }
    }],
    onEditableSave: function (field, row, oldValue, $el) {
      $.ajax({
        type: "put",
        url: "/car/" + row.id,
        data: {
          id: row.id,
          status: row.status
        },
        dataType: 'json',
        success: function (data, status) {
          $('#table').bootstrapTable('updateRow', {index: row.id, row: row})
          if (data.flag) {
            // 这里的状态显示有自定义样式区分，做单行的更新
            msgNotify(data.msg, "success", 1500)
          } else {
            msgNotify(data.msg, "danger", 1500)
          }
        },
        error: function () {
          msgNotify('修改失败，请稍后再试', "danger", 1500)
        }
      });
    },
    onLoadSuccess: function (data) {
      $("[data-toggle='tooltip']").tooltip();
    }
  });

  // 操作方法 - 编辑
  function editUser(id) {
    //点击编辑按钮弹出模态框
    $(".modal-title").text("更新车辆")
    //查出并显示车辆信息
    getCarById(id)

    //、把规则的id传递给模态框的更新按钮
    $("#submit_btn").addClass("edit_submit").attr("edit-id", id)
    $("#carInfoModal").modal({
      backdrop: "static"
    })
  }

  // 操作方法 - 查看
  function showUser() {
    // alert('查看详细');
  }

  //获取所有货车类型
  function getCarTypes(ele) {
    $(ele).empty()
    $.get("/carType", {}, function (res) {
      if (res.flag) {
        $.each(res.data, function () {
          let optionEle = $("<option></option>").append(this.name).attr("value", this.id);
          optionEle.appendTo(ele);
        })
      }
    })
  }

  //点击新增按钮弹出模态框。
  $("#btn_add").click(function () {
    $(".modal-title").text("新增车辆")
    //清除表单数据（表单完整重置（表单的数据，表单的样式））
    reset_form("#carInfoModal form")
    //弹出模态框
    $("#carInfoModal").modal({
      backdrop: "static"
    })
  })

  /*
  批量启用
   */
  $("#btn_enable").click(function () {
    changeStatusBatch(0, '/car')
  })

  /*
  批量维护
   */
  $("#btn_disable").click(function () {
    changeStatusBatch(2, '/car')
  })

  /*
  根据id查询车辆信息
   */
  function getCarById(id) {
    $.get("/car/" + id, {}, function (res) {
      let car = res.data
      $("#typeId option[value='" + car.typeId + "']").prop("selected", "selected")
      $("#licence").val(car.licence)
    })
  }

  //校验表单数据
  function validate_add_form() {
    let licence_regex = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
    let licence = $("#licence").val()
    if (licence_regex.test(licence)) {
      show_validate_msg("#licence", "success", "")
      return true
    } else {
      show_validate_msg("#licence", "error", "请输入正确的车牌号码")
      return false
    }
  }

  /*
  检验车牌号是否存在
   */
  $(document).on("input propertychange", "#licence", function () {
    let licence = $(this).val()
    //发送ajax请求查询数据库该车辆是否已存在
    $.get("/car/checkLicence", {licence: licence}, function (res) {
      if (res.flag) {
        show_validate_msg("#licence", "success", "")
        $("#submit_btn").attr("licence-exist", "false")
      } else {
        show_validate_msg("#licence", "error", res.msg)
        $("#submit_btn").attr("licence-exist", "true")
      }
    })
  })

  //显示校验结果的提示信息
  function show_validate_msg(item, status, msg) {
    $(item).parent().removeClass("has-success has-error")
    $(item).next("span").text("")
    if ("success" === status) {
      $(item).parent().addClass("has-success")
    } else if ("error" === status) {
      $(item).parent().addClass("has-error")
      $(item).next("span").text(msg)
    }
  }

  /*
  * 更新和新增车辆
  */
  $("#carInfoForm").submit(function (event) {
    //校验表单信息
    if (!validate_add_form()) {
      return false
    }
    let $submit = $("#submit_btn")
    //判断之前的ajax车牌号校验是否成功。如果成功。
    if ($submit.attr("licence-exist") === "true") {
      return false
    }

    event.preventDefault()
    $("#carInfoModal").modal('hide')

    if ($submit.hasClass("edit_submit")) {
      //清除按钮的edit_submit类
      $submit.removeClass("edit_submit")
      //编辑车辆
      $.ajax({
        url: "/car/" + $submit.attr("edit-id"),
        type: "PUT",
        data: $(this).serialize(),
        success: function (res) {
          load()
          if (res.flag) {
            msgNotify(res.msg, "success", 1500)
          } else {
            msgNotify(res.msg, "danger", 1500)
          }
        }
      })
    } else {
      // 新增车辆
      $.post("/car", $(this).serialize(), function (res) {
        load(1)
        if (res.flag) {
          msgNotify(res.msg, 'success', 1500)
        } else {
          msgNotify(res.msg, 'danger', 1500)
        }
      })
    }
  })

  /*
    批量删除
   */
  tb_deleteBatch("/car")

</script>
</body>
</html>